@use "sass:math";

// 设计系统参数
$design-width: 1920;
$design-height: 1080;
$base-rem: 100; // 1rem = 100px
$color-primary: #2a85ff;
$color-bg: #1a1d28;
$color-card: #252a38;

// 单位转换
@function px2rem($px) {
  @return math.div($px, $base-rem) * 1rem;
}

// 混合器：卡片效果
@mixin neumorphism-card {
  background: $color-card;
  border-radius: px2rem(12);
  box-shadow: 
    0 px2rem(8) px2rem(24) rgba(0,0,0,0.15),
    0 0 px2rem(2) rgba(255,255,255,0.1);
}

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}

html {
  font-size: 100px; // JS动态覆盖
}

body {
  background: $color-bg;
  color: #fff;
  overflow: hidden;
}

/* 主容器 */
.dashboard {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: px2rem(20);
}

/* 头部区域 */
.dashboard-header {
  height: px2rem(80);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 px2rem(40);
  margin-bottom: px2rem(20);

  .title {
    font-size: px2rem(36);
    font-weight: bold;
    background: linear-gradient(135deg, #6b8dd6, $color-primary);
    background-clip: text;
  }

  .time-info {
    font-size: px2rem(24);
    color: rgba(255,255,255,0.8);
  }
}

/* 主内容区 */
.dashboard-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: px2rem(20);
  overflow: hidden;

  .chart-container {
    height: 100%;
    @include neumorphism-card;
    padding: px2rem(20);
    
    .chart-card {
      height: 100%;
      display: flex;
      flex-direction: column;

      .chart-title {
        font-size: px2rem(24);
        margin-bottom: px2rem(16);
        padding-left: px2rem(10);
        border-left: px2rem(4) solid $color-primary;
      }

      .chart-area {
        flex: 1;
        background: rgba(255,255,255,0.05);
        border-radius: px2rem(8);
      }
    }
  }
}

/* 响应式适配 */
@media (max-aspect-ratio: 16/9) {
  .dashboard-content {
    grid-template-columns: 1fr;
    // 增加以下优化代码
    gap: px2rem(10);  // 缩小间距
    padding-bottom: px2rem(20);  // 底部留白
    
    .chart-container {
      height: auto;  // 取消固定高度
      min-height: px2rem(400);  // 设置最小高度
      flex: 1;  // 启用弹性填充
    }
  }
  
  // 添加超小屏幕适配
  @media (max-height: 600px) {
    .dashboard-header {
      height: px2rem(60);
      padding: 0 px2rem(20);
      
      .title {
        font-size: px2rem(24);
      }
      
      .time-info {
        font-size: px2rem(18);
      }
    }
    
    .chart-container {
      min-height: px2rem(300) !important;
      
      .chart-area {
        height: px2rem(200) !important;
      }
    }
  }
}